<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:67:"D:\wamp\www\xxoa\public/../application/mobile\view\index\goods.html";i:1536635754;s:67:"D:\wamp\www\xxoa\public/../application/mobile\view\index\index.html";i:1536635754;}*/ ?>
<!DOCTYPE html>
<html>

<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="#ffffff" name="msapplication-TileColor" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>千图网_专注免费设计素材下载的网站_免费设计图片素材中国</title>
    <meta name="keywords" content="千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图片素材,网页素材,免费素材,PS素材,网站素材,设计模板,设计素材,www.58pic.com,网页模板免费下载,千图,素材中国,素材,免费设计,图片" />
    <meta name="description" content="千图网(www.58pic.com) 是专注免费设计素材下载的网站！提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载" />
    <style>
        #list img{
            width:172px;
            height:154px;
            background-image:url('http://pdyc9epam.bkt.clouddn.com/201809085b936fd387d73.gif');
            background-repeat:no-repeat;
            background-position:center;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="http://icon.qiantucdn.com/css/mobile/base.css?v12" />
    <link rel="stylesheet" type="text/css" href="http://icon.qiantucdn.com/css/mobile/index_v1.0.css?v1" />
    <link rel="stylesheet" type="text/css" href="http://icon.qiantucdn.com/css/mobile/search_v1.4.css?v1" />

    <!--<script type="text/javascript">-->
        <!--//平台、设备和操作系统-->
        <!--var system = {-->
            <!--win: false,-->
            <!--mac: false,-->
            <!--xll: false,-->
            <!--ipad:false-->
        <!--};-->
        <!--//检测平台-->
        <!--var p = navigator.platform;-->
        <!--system.win = p.indexOf("Win") == 0;-->
        <!--system.mac = p.indexOf("Mac") == 0;-->
        <!--system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);-->
        <!--system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;-->
        <!--//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面-->
        <!--if (system.win || system.mac || system.xll||system.ipad) {-->
            <!--window.location.href = "<?php echo url('index/index/index'); ?>";-->
        <!--} else {-->

            <!--window.location.href = "<?php echo url('mobile/index/index'); ?>";-->
        <!--}-->
    <!--</script>-->
</head>

<body>

<section class="pdrem">
    <nav id="nav" class="clearfix">
        <div class="nav-a">
            <a href="<?php echo url('mobile/index/index'); ?>" title="">返回首页</a>
        </div>
    </nav>
</section>


<div class="imgover">
    <div class="imgshow" id="imgshow">

        <?php if(($data)): if(is_array($data) || $data instanceof \think\Collection || $data instanceof \think\Paginator): $i = 0; $__LIST__ = $data;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?>
        <div class="list fl">
            <div class="img">
                <a href="<?php echo url('mobile/details/index',['gid'=>$vo['id']]); ?>" title="日式玉兰花素雅婚礼工装效果图"><img src="http://pdyc9epam.bkt.clouddn.com/<?php echo $vo['icon']; ?>?imageMogr2/thumbnail/304x272</gravity/North/crop/304x272/format/jpg/blur/1x0/quality/75|imageslim" alt="日式玉兰花素雅婚礼工装效果图" style="height:auto;" class="lazy" /></a>
            </div>

            <div class="info">
                <p><a href="<?php echo url('mobile/details/index',['gid'=>$vo['id']]); ?>" title="{vo['desc']}"><?php echo $vo['pname']; ?></a></p>
                <div class="data">
                    <span class="star fl"><i class="iconfont"></i><?php echo $vo['house']; ?></span>
                    <span class="download fl"><i class="iconfont"></i><?php echo $vo['sold']; ?></span>
                </div>
            </div>
        </div>
        <?php endforeach; endif; else: echo "" ;endif; else: ?>
        <p>该分类下无作品</p>
        <?php endif; ?>

    </div>
</div>



<div class="foot"></div>
<footer id="footer">
    <a href="<?php echo url('mobile/index/index'); ?>" class="on" style="width:25%"><i class="iconfont"></i>首页</a>
    <a href="<?php echo url('mobile/category/index'); ?>" style="width:25%"><i class="iconfont"></i>素材分类</a>
    <a href="<?php echo url('mobile/design/index'); ?>" style="width:25%"><i class="iconfont"></i>设计资讯</a>
    <a href="<?php echo url('mobile/login/index'); ?>" style="width:25%"><i class="iconfont"></i>用户后台</a>
</footer>
<script type="text/javascript" src="http://icon.qiantucdn.com/js/mobile/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://icon.qiantucdn.com/js/mobile/!!Masonry.js,TouchSlide.js"></script>


<script type="text/javascript">

    var imgs = document.getElementById('list').getElementsByTagName('img');
    //获取list的宽度
    var box_width=list.offsetWidth;
//    console.log(box_width);

    //获取视口的高度
    var view_height=document.documentElement.clientHeight;
//    console.log(view_height);
    //计算横向加载张数
//    var x_num=Math.floor(box的宽/img宽)
    var x_num=Math.floor(box_width/imgs[0].offsetWidth);
//    console.log(x_num);
    //计算首屏图片数量
//    第一张图片距离顶部的偏移量
//    var first_num=Math.ceil((视口高度-首图至顶部的偏移量)/图片高度)*列数;
    var first_num=Math.ceil((view_height-imgs[0].offsetTop)/imgs[0].offsetHeight)*x_num;

    console.log(first_num);


    //总记录数
//    从哪张开始 加载几张
    var m=0;
    loadImg(m,first_num);
    m+=first_num;


    window.onscroll=function()
    {
        if(m>=imgs.length){
            return;
        }
        var top=document.body.scrollTop||document.documentElement.scrollTop;
        //还未加载的首图到顶部的偏移量
        var img_top=imgs[m].offsetTop;
        //视口高度+滚动条滚动过的像素>还未加载的首图到顶部的偏移量 就可以加载了

        if((view_height+top)>=img_top){
            loadImg(m,x_num);
            m+=x_num;
        }
    }
//    加载图片函数
    //从第几张开始加载几张
    function loadImg(start,length)
    {
        for (var i = start; i < (start+length); i++) {
            if(i>=imgs.length){
                return;
            }
            (function(i){
                setTimeout(function(){imgs[i].src=imgs[i].getAttribute('data-src');},500);
            })(i);
        }
    }

//    setTimeout(function(){
//        var imgs = document.getElementById('list').getElementsByTagName('img');
//        for(var i = 0 ; i<imgs.length; i++)
//        {
//            imgs[i].src=imgs[i].getAttribute('data-src');
//        }
//    },1000);



    $(function(){
    //lazy
    //    $(".imgshow").find("img.lazy").lazyload({
    // 	effect: "fadeIn",
    // 	threshold : 300
    // });
    //点击弹出搜索页面
    $(".search").on("click",".iconfont",function(){
        $("#search").show();
    });
    $("#search").on("click",".back-index",function(){
        $("#search").hide();
    });
    $("#js-so").submit(function() {
        var G = $("#js-so-kw").val().replace(/s+/g, "");
        if (G.length == 0 || G == "700万张免费设计素材任意下载") {
            alert("请输入要查找的关键词");
            return false;
        }

        $.getJSON("http://m.58pic.com/index.php?m=search&a=ajaxCheckPinyin&jsoncallback=?", {
            kw:G
        }, function(H) {
            if (H["msg"] == true) {
                window.location.href = "http://m.58pic.com/tupian/" + H["pinyin"] + ".html";
            } else {
                window.location.href = "http://m.58pic.com/tupian/0-0-0-default-0-0-" + G + "-0-.html";
            }
        });
        return false;
    });
    $("#js-so-kw").focus(function(event) {
        if ($("#js-so-kw").val() == "700万张免费设计素材任意下载") {
            $("#js-so-kw").val("");
        }
        $("#js-so-kw").css({color:'#333'});
    });
});
TouchSlide({
    slideCell:"#focus",
    titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
    mainCell:".bd ul",
    effect:"left",
    autoPlay:true,//自动播放
    autoPage:true, //自动分页
    switchLoad:"_src" //切换加载，真实图片路径为"_src"
});
//var B = $("#imgshow");
//$(window).resize(function() {
//    $("#imgshow .list .img img").each(function(){
//        var imgh = $(this).height();
//        if(imgh > 300){
//            imgh = 300;
//        }
//        $(this).parents(".img").height(imgh).css('overflow', 'hidden');
//    });
//    B.masonry({
//        itemSelector:".list",
//        singleMode:true,
//        isAnimated: false,
//        resizeable: true
//    });
//});
//window.onload=function (){
//    var isOK = true;
//    $("#imgshow .list .img img").each(function(){
//        var imgh = $(this).height();
//					if(imgh > 300){
//            imgh = 300;
//        }
//        $(this).parents(".img").height(imgh).css('overflow', 'hidden');
//
//    });
//    //瀑布
//    B.masonry({
//        itemSelector:".list",
//        singleMode:true,
//        isAnimated: false,
//        resizeable: true
//    });
//    $("#more").click(function() {
//        var page = $.trim($("#page"f49f6208a8902071ed9e8a137e2db83
//	).val());
//        page ++;
//        if(page  > 6) {
//            window.location.href = '/explore/';
//            return ;
//        }
//        if(isOK){
//            isOK = false;
//            var url = "http://m.58pic.com/index.php?m=index&a=ajaxRecom&page="+page+"&t="+(new Date()).getTime();
//            $.get(url,function(d){
//                $("#page").val(page);
//                var $boxes = $(d);
//                B.append($boxes).masonry("appended", $boxes);
//                B.imagesLoaded(function () {
//                    $("#imgshow .list .img img").each(function(){
//                        var imgh = $(this).height();
//                        if(imgh > 300){
//                            imgh = 300;
//                        }
//                        $(this).parents(".img").height(imgh);
//                    });
//                    B.masonry();
//                });
//                if(page == 6){
//                    $(".load-more").before('<div class="no-more">已加载完所有内容</div>');
//                    $("#more").text("查看为我推荐");
//                }
//                isOK = true;
//            })
//        }
//    });
//}
</script>
<script>var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?644763986e48f2374d9118a9ae189e14";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();


</script>


</body>
</html>
